<template>
	<view class="zaiui-cart-box" :class="show?'show':''">
		<!--标题栏-->
		<bar-title bgColor="bg-white" :isBack="false">
			<block slot="content">购物车</block>
			<block slot="right">
				<text class="cuIcon-info"/>
			</block>
		</bar-title>

		<view class="bg-white zaiui-cart-list-view">
			<checkbox-group class="block" @change="CheckboxChange">
				<block v-for="(item,index) in goodsList" :key="index">
					<view class="padding zaiui-checkbox-title-view">
						<view class="text-black text-lg shop-title">{{item.mall_name}}</view>
					</view>
					<block v-for="(items,indexs) in item.goods" :key="indexs">
						<view class="light goods-list-item-view">
							<checkbox class='round red sm zaiui-checked' :class="items.checked?'checked':''" :checked="items.checked?true:false"
							 :value="items.goods_id + ''" />
							<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+ items.goods_image_url +')'}]" />
							<view class="goods-info-view">
								<view class="text-cut text-black">{{items.goods_name}}</view>
								<view class="text-sm text-gray text-cut">{{items.goods_desc}}</view>
								<view class="goods-price-view">
									<view class="text-price-view">
										<text class="text-price text-red text-lg">{{items.min_group_price*items.num/100}}</text>
										<text class="cu-tag bg-red sm radius">单价{{items.min_group_price/100}}</text>
									</view>
									<view class="step-btn-view">
										<button class="zaiui-btn" @click="changeNum(items.goods_id,'-')">-</button>
										<input class="zaiui-input" disabled type='number' :value="items.num"></input>
										<button class="zaiui-btn" @click="changeNum(items.goods_id,'+')">+</button>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</checkbox-group>
		</view>
		<!--底部操作-->
		<view class="bg-white zaiui-foot-padding-bottom">
			<view class="cu-bar padding-lr">
				<view class="checked-view" @tap="tapChecked">
					<checkbox class='round red sm zaiui-checked' :class="checkAll?'checked':''" :checked="checkAll"></checkbox>
					<text class="text-black text-lg text-bold">全选</text>
				</view>
				<view class="price-view">
					<view class="text-black text-bold">合计：￥{{totalMoney.toFixed(2)}}</view>
				</view>
				<view class="btn-view">
					<button class="cu-btn radius" :class="selectNum > 0 ?'bg-red':'bg-gay'" @tap="tapBtn">去结算({{selectNum}})</button>
				</view>
			</view>
		</view>
		<!--占位底部距离-->
		<view class="cu-tabbar-height"/>
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';

	import _tool from '@/static/zaiui/util/tools.js'; //工具函数
	import {
		shopCart,
		userOrder
	} from '@/utils/storage.js'
	export default {
		components: {
			barTitle,
		},
		props: {
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				goodsList: [],
				mallIds: [],
				checkAll: false,
				goods_checked: false,
				totalMoney: 0,
				selectNum: 0,
				goodIds:[]
			}
		},
		created() {
			let shopCartData = shopCart.get();
			
			let cartData = {};
			let mids = [];
			let gids = [];
			shopCartData.forEach(v => {
				gids.push(v.goods_id)
				if (cartData[v.mall_id]) {
					let idx = cartData[v.mall_id].goods.findIndex(g => g.goods_id === v.goods_id)
					if (idx > -1) {
						cartData[v.mall_id].goods[idx].num += 1
					} else {
						v.num = 1;
						v.checked = false;
						cartData[v.mall_id].goods.push(v)
					}
				} else {
					mids.push(v.mall_id);
					v.num = 1;
					v.checked = false;
					cartData[v.mall_id] = {
						mall_id: v.mall_id,
						mall_name: v.mall_name,
						checked: false,
						goods: [v]
					}
				}
			})
			this.goodsList = cartData;
			this.mallIds = mids;
			this.goodIds = gids;
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		methods: {
			changeNum(gid, type) {
				let totalMoney = 0;
				let selectNum = 0;
				for (let i in this.goodsList) {
					this.goodsList[i].goods = this.goodsList[i].goods.map(v => {
						if (v.goods_id == gid) {
							type == '+' ? (v.num += 1) : (v.num > 0 && (v.num -= 1));
						}
						if (v.checked) {
							totalMoney += v.min_group_price * v.num / 100;
							selectNum+=v.num;
						}
						return v;
					})
				}
				this.totalMoney = totalMoney;
				this.selectNum = selectNum;
			},
			CheckboxChange(e) {
				let ids = e.detail.value;
				let totalMoney = 0;
				let selectNum = 0;
				for (let i in this.goodsList) {
					this.goodsList[i].goods = this.goodsList[i].goods.map(v => {
						if (ids.includes(String(v.goods_id))) {
							v.checked = true;
							totalMoney += v.min_group_price * v.num / 100;
							selectNum+=v.num;
						}else{
							v.checked = false;
						}
						return v;
					})
				}
				this.totalMoney = totalMoney;
				this.selectNum = selectNum;
			},
			tapChecked() {
				if (this.checkAll) {
					this.checkAll = false;
					this.CheckboxChange({detail:{value:[]}})
				} else {
					this.checkAll = true;
					this.CheckboxChange({detail:{value:this.goodIds.map(v=>String(v))}})
				}
			},
			barEditTap() {
				if (this.goods_checked) {
					this.goods_checked = false;
				} else {
					this.goods_checked = true;
				}
			},
			tapBtn() {
				if(this.selectNum < 1){
					uni.showToast({
						title:'请选择商品',
						icon:'none'
					})
					return;
				}
				let order = [];
				for (let i in this.goodsList) {
					 this.goodsList[i].goods.forEach(v => {
						v.checked && order.push(v)
					})
				}
				userOrder.set(order);
				uni.navigateTo({
					url: '/pages/goods/settlement'
				});
			}
		}
	}
</script>

<style lang="scss">
	.zaiui-cart-box {
		display: none;
	}
	
	.zaiui-cart-box.show {
		display: block;
	}
	.zaiui-cart-list-view {
		.zaiui-checkbox-title-view {
			position: relative;
			line-height: 1.6;
			.zaiui-checked {
				position: absolute;
				top: 29.09rpx;
				z-index: 999;
				transform: scale(0.7);
			}
			.shop-title {
				position: relative;
			    padding-left: 63.63rpx;
			}
		}
		.goods-list-item-view {
			position: relative;
			padding: 36.36rpx 27.27rpx;
			.zaiui-checked {
				position: absolute;
				top: 90.9rpx;
				z-index: 999;
				transform: scale(0.7);
			}
			.cu-avatar {
				position: absolute;
				height: 163.63rpx;
				width: 163.63rpx;
				left: 90.9rpx;
			}
			.goods-info-view {
				position: relative;
				padding-left: 254.54rpx;
				height: 163.63rpx;
				line-height: 1.4;
				.zaiui-tag-view {
					position: relative;
					height: 38.18rpx;
				}
				.goods-price-view {
					position: relative;
					line-height: 1.7;
					top: 9.09rpx;
					.text-price-view {
						position: absolute;
						.cu-tag {
						    position: relative;
						    top: -3.63rpx;
						    left: 7.27rpx;	
						}
					}
					.step-btn-view {
						position: relative;
						padding-left: 272.72rpx;
						height: 45.45rpx;
						.zaiui-btn {
							border: 2rpx solid rgba(113, 113, 113, 0.2);
							position: absolute;
							background: initial;
							text-align: center;
							line-height: 32.72rpx;
							border-radius: 0;
							font-size: 45.45rpx;
							height: 45.45rpx;
							width: 45.45rpx;
							right: 123.63rpx;
						    padding: 0;
							&:after {
								width: 0;
								height: 0;
								border: 0;
								border-radius: 0;
							}
						}
						.zaiui-input {
							width: 81.81rpx;
							right: 43.63rpx;
						    height: 45.45rpx;
							position: absolute;
						    text-align: center;
						    border: 2rpx solid rgba(113, 113, 113, 0.2);
							border-left: 0;
							color: #333333;
						}
						.zaiui-input + .zaiui-btn {
							border-left: 0;
							right: 0;
						}
					}
				}
			}
		}
	}
</style>
